<template>
	<view class="content">
		<view class="block">
			<view class="desc-block">
				<view class="company">{{detail.company}}</view>
				<view class="text fw fs15">机构信息</view>
				<!-- <view class="desc">
					<image :src="imageUrl+'/train/department_icon.png'" mode="widthFix" class="desc-icon"></image>
					<view class="desc-text"><text class="label">机构：</text>{{detail.company}}</view>
				</view> -->
				<view class="desc">
					<view class="desc-icon iconfont icon-dianhua"></view>
					<view class="desc-text" v-if="detail.mobile">机构电话：<text class="label">{{detail.mobile}}</text>
					</view>
					<view class="desc-text" v-else><text class="label">机构电话：</text>暂无</view>
					<!-- <image :src="imageUrl+'/train/time_icon.png'" mode="widthFix" class="desc-icon"></image>
					<view class="desc-text"><text class="label">机构电话：</text>{{detail.mobile}}</view> -->
				</view>
				<view class="desc">
					<image :src="imageUrl+'/train/addr_icon.png'" mode="widthFix" class="desc-icon"></image>
					<view class="desc-text">机构地址：<text class="label">{{detail.transaddress}}</text></view>
				</view>

				<!-- <view class="address">机构地址 <text class="txt">{{detail.transaddress}}</text></view>
				 -->
			</view>
		</view>
		<view class="block">
			<view class="text fw fs15">培训种类</view>
			<!-- <view class="text fs13 darkgray">{{detail.describer}}</view> -->
			<view class="label-item" v-if="detail.typeConfigModelList.length>0">
				<view v-for="(item) in detail.typeConfigModelList" :key="item.id">
					<view class="label" style="margin-top: 20rpx;display: flex;flex-flow: row wrap;"
						v-if="item.sonList.length>0">
						<view style="margin-top: 10rpx;">{{item.typeText}}:</view>

						<view class="label-list" v-for="(itemSon) in item.sonList" :key="itemSon.id">
							<view class="label" @click="navigate('/page_other/train/introduce?id='+itemSon.id)">
								{{itemSon.configIdText}}
							</view>
						</view>
					</view>


				</view>
			</view>
			<view v-else class="empty">暂无数据</view>
		</view>
		<view class="block">
			<view class="text fw fs15">机构介绍</view>
			<mp-html :content="detail.describer" />
			<!-- <view class="text fs13 darkgray">{{detail.describer}}</view> -->
		</view>
		<!-- 		<view class="block">
			<view class="text fw fs15">相关岗位</view>
			<view class="position-list" v-if="position.length>0">
				<view class="position-block block">
					<view @click="navigate('/page_other/job_hunting/job_detail/index?id='+item.id)"
						v-for="(item) in position" :key="item.id" class="position-item">
						<view class="name-block">
							<view class="name">{{item.jobTitle}}</view>
							<view class="other">{{item.jobAddress}} {{item.expRequireText}}</view>
							<view class="wage" v-if="item.minSalary">{{item.minSalary}}-{{item.maxSalary}}元</view>
							<view class="wage" v-else>面议</view>
						</view>
						<view class="label-block">
							<view class="label-item">{{item.minEducationText}} </view>
						</view>
					</view>
				</view>
			</view>
			<view v-else style="text-align: center;">暂无数据</view>
		</view> -->
		<view @click="navigate('/page_other/train/apply?id='+detail.id+'&type='+label)" class="btn"
			v-if="detail.typeConfigModelList.length>0">立即报名
		</view>
		<!-- <view @click="navigate('/page_other/train/apply?id='+detail.id+'&type='+label)" class="btn"
			v-if="apply===1&&type===1">立即报名
		</view>
		<view class="btn" v-else>已开班</view>
		<view class="btn" v-if="apply===2&&type===1">已报名 -->
	</view>
	</view>
</template>

<script>
	import {
		getTraining,
		findTrainEnrollApi,
		getMyPublishByPost
	} from '@/api/train.js';
	export default {
		data() {
			return {
				id: null,
				imageUrl: '',
				detail: {
					trainName: '',
					company: '',
					trainTime: '',
					transaddress: '',
					typeConfigModelList: []

				},
				position: {},
				apply: null,
				type: null,
				label: []
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			getDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getTraining({
					id
				}).then((res) => {
					uni.hideLoading()
					this.detail = res;

				}).catch((res) => {
					uni.hideLoading()
					this.showToast('加载失败，请重试');
				})
			},

			// getMyPublishByPostApi(postId) {
			// 	uni.showLoading({
			// 		title: '加载中',
			// 		mask: true
			// 	})
			// 	getMyPublishByPost({
			// 		postId,
			// 		page: 1,
			// 		limit: 3
			// 	}).then((res) => {
			// 		uni.hideLoading()
			// 		this.position = res;
			// 	}).catch((res) => {
			// 		uni.hideLoading()
			// 		this.showToast('加载失败，请重试');
			// 	})
			// },
			findTrainEnroll() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				findTrainEnrollApi({}).then((res) => {
					uni.hideLoading()
					this.apply = res;
				})
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			}
		},
		computed: {
			user() {
				return this.$store.getters.user
			}
		},
		onLoad(e) {
			this.imageUrl = this.globalConfig.imageUrl;
			this.getDetail(e.id);
			this.id = e.id;
			this.type = e.type
			if (this.user) {
				this.findTrainEnroll()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	$box-shadow: 0 0 10px 0 #efefef;

	.content {
		width: 100%;
		padding: 30rpx;
		background: #FAFAFA;
		position: relative;
		padding-bottom: 120rpx;

		.block {
			width: 100%;
			border-radius: 10rpx;
			background: #fff;
			box-shadow: $box-shadow;
			padding: 20rpx;

			view.text {
				line-height: 2.3;
			}

			margin-bottom:30rpx;

			.label-item {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				width: calc(100% - 16rpx);

				.label-list {
					display: flex;
					flex-direction: row;
					margin-left: 20rpx;
					margin-top: 10rpx;

					.label {
						background: #D9E8FF;
						border-radius: 50rpx;
						color: #1777FF;
						font-size: 28rpx;
						padding: 4rpx 14rpx;

					}
				}
			}


			.desc-block {
				display: flex;
				flex-direction: column;

				.company {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.title {
					font-size: 32rpx;
					margin-bottom: 20rpx;
					font-weight: bold;
				}

				.address {
					color: #AFB0B3;
					font-size: 30rpx;
					margin-bottom: 20rpx;

					.txt {
						color: #000;
						margin-left: 10rpx;
					}
				}

				.desc {
					display: flex;
					//align-items: center;
					margin: 20rpx 0 0rpx 0;

					.desc-icon {
						width: 30rpx;
						margin-right: 12rpx;
					}

					.iconfont {
						color: #FE7526;
						margin-right: 12rpx;
						font-weight: bold;
						padding-top: 4rpx;
					}

					.desc-text {
						font-size: 30rpx;
						// color: #999;

						.label {
							color: #999;
						}
					}
				}
			}

			.all {
				color: #FE7526;
			}

			.label-block {
				width: 100%;
				font-size: 24rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: left;
				margin-top: 20rpx;

				.label-item {
					padding: 8rpx 12rpx;
					background: #F5F6F8;
					color: #999;
					margin: 0 30rpx 20rpx 0;
				}
			}

			.position-item {
				.name-block {
					.name {
						color: #000;
						font-weight: bold;
						font-size: 34rpx;
						width: 360rpx;
					}

					.other {

						font-size: 26rpx;
						color: #999;
						padding-top: 20rpx;
					}

					.wage {
						padding-top: 20rpx;
						color: #FE7526;
						font-size: 36rpx;
						font-weight: bold;
					}

				}

			}
		}

		.block:last-child {
			margin-bottom: 0;
		}

		.btn {
			width: 350rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			text-align: center;
			margin: 100rpx auto 30rpx auto;
			background-color: #ff7626;
			border-radius: 80rpx;
			position: sticky;
			bottom: 60rpx;
		}
	}
</style>